<template>
  <div>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="rightsList"
      bordered
      :pagination="false"
    >
      <a-tag
        slot="level"
        slot-scope="dataIndex"
        v-if="dataIndex === '0'"
        color="cyan"
        >一级</a-tag
      ><a-tag
        slot="level"
        slot-scope="dataIndex"
        v-else-if="dataIndex === '1'"
        color="green"
        >二级</a-tag
      ><a-tag
        slot="level"
        slot-scope="dataIndex"
        v-else-if="dataIndex === '2'"
        color="orange"
        >三级</a-tag
      >
    </a-table>
  </div>
</template>

<script>
export default {
  created() {
    this.getRightsList()
  },
  data() {
    return {
      rightsList: [],
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '权限名称',
          dataIndex: 'authName'
        },
        {
          title: '路径',
          dataIndex: 'path'
        },
        {
          title: '权限等级',
          dataIndex: 'level',
          scopedSlots: { customRender: 'level' }
        }
      ]
    }
  },
  methods: {
    async getRightsList() {
      const { data: res } = await this.$http.get('rights/list')
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限列表失败')
      }
      this.rightsList = res.data
    }
  }
}
</script>

<style lang="less" scoped></style>
